import React, { useEffect, useState } from 'react'
import Taro from '@tarojs/taro';
import { getCurrentInstance, useReachBottom, usePullDownRefresh } from '@tarojs/taro'
import { backgroundObj, loginData, goBack, toast } from '@/utils/utils'
import { fetchPageConfigDetailForUser } from '@/server/shop';
import { View, Picker, Text, Button } from '@tarojs/components'
import { fakeSaveUserAddress } from '@/server/shop';
import { AtForm, AtInput, AtButton, AtSwitch, AtList, AtListItem } from 'taro-ui'
import Input from '@/components/Input';
import "taro-ui/dist/style/components/form.scss";
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/switch.scss";
import "taro-ui/dist/style/components/list.scss";
import "./index.scss";
export default (props) => {
    const { params } = getCurrentInstance().router
    const { type, detail } = params
    const [data, setData] = useState({})
    const { receiveUsername, receiveMobile = '', address, provinceCode, cityCode, districtCode,
        provinceName, cityName, districtName, defaultFlag
    } = data;
    const cityValue = provinceName + cityName + districtName;
    const cityDefaule = "请选择地区"
    const onFinish = async () => {
        const { } = data
        console.log(data)
        if (!provinceCode || !cityCode || !districtCode) {
            return toast('请选择地址')
        } else if (!receiveUsername || !receiveMobile) {
            return toast('请填写完整信息后提交')
        } else if (receiveMobile.length > 11) {
            return toast('请填写正确的手机号码')
        } else {
            fakeSaveUserAddress({
                ...data,
                defaultFlag: defaultFlag ? '1' : '0'
            }).then(val => {
                toast('保存成功')
                goBack()
            })
        }
    }
    useEffect(() => {
        if (type === 'edit') {
            const defaultData = JSON.parse(detail)
            setData(defaultData)
            // form.setFieldsValue(defaultData)
        }
    }, [])
    const JsonKeyList = ['provinceCode', 'cityCode', 'districtCode']
    const JsonValueList = ['provinceName', 'cityName', 'districtName']
    const handleChange = (val = {}) => {
        setData({
            ...data,
            ...val
        })
    }
    return <View className='SetAddressBook_box'>
        <Input
            name='receiveUsername'
            title='收货人'
            required
            type='text'
            placeholder='请输入收货人'
            value={receiveUsername}
            onChange={(e) => handleChange({
                receiveUsername: e
            })}
        />
        <Input
            name='receiveMobile'
            title='手机号'
            required
            type='text'
            placeholder='请输手机号'
            value={receiveMobile}
            onChange={(e) => handleChange({
                receiveMobile: e
            })}
        />
        <View>
            <Picker mode='region' level={'region'} onChange={(e) => {
                const { code = [], value = [] } = e.detail
                let dataOnj = {}
                code.forEach((item, index) => {
                    JsonKeyList.forEach((o, c) => {
                        if (index === c) {
                            if (c === 0) {
                                dataOnj[JsonKeyList[c]] = code[c].slice(0, 2)
                            } else if (c === 1) {
                                dataOnj[JsonKeyList[c]] = code[c].slice(0, 4)
                            } else {
                                dataOnj[JsonKeyList[c]] = code[c]
                            }

                        }
                    })
                    JsonValueList.forEach((a, s) => {

                        if (index === s) {
                            if (s === 0) {
                                dataOnj[JsonValueList[s]] = value[s].slice(0, 2)
                            } else if (s === 1) {
                                dataOnj[JsonValueList[s]] = value[s].slice(0, 4)
                            } else {
                                dataOnj[JsonValueList[s]] = value[s]
                            }

                        }
                    })
                })
                setData({
                    ...data,
                    ...dataOnj
                })
            }}>
                <View>
                    <AtListItem
                        title='所在地区'
                        extraText={cityValue ? cityValue : '请选择'}
                    />

                </View>

            </Picker>
        </View>
        <Input
            name='address'
            title='详细地址'
            type='text'
            placeholder='请输详细地址'
            value={address}
            onChange={(e) => handleChange({
                address: e
            })}
        />

        <AtSwitch checked={defaultFlag === '1'} onChange={(e) => {
            handleChange({
                defaultFlag: e ? '1' : '0'
            })
        }} title='设为默认收货地址'></AtSwitch>
        <Button onClick={() => {
            onFinish()
        }}>保存</Button>
    </View>
}